<%-- Created by IntelliJ IDEA. User: Administrator Date: 2022/12/15 Time: 21:38
To change this template use File | Settings | File Templates. --%> <%@ page
contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>服务归档</title>
    <jsp:include page="../common/css_js.jsp" />
    <jsp:include page="../common/table.jsp" />
  </head>
  <body>
    <div class="container col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">
            <h4>
              <b>服务归档</b><br />
              <h6>已处理完成的客户服务历史记录查看</h6>
            </h4>
          </div>
        </header>
        <div class="card-body">
          <!-- 条件查询表单 -->
          <form
            class="form-inline"
            name="form1"
            action="#"
            method="post"
            id="toolbar"
          >
            <!-- 操作 -->
            <a class="btn btn-primary" href="#" onclick="query()"
              ><span class="mdi mdi-table-large"></span>显示所有</a
            >
            &nbsp;&nbsp;&nbsp;
            <b>服务类型：</b
            ><label>
              <select class="form-control" name="serviceType">
                <option value="">请选择</option>
                <option value="咨询">咨询</option>
                <option value="建议">建议</option>
                <option value="投诉">投诉</option>
              </select> </label
            >&nbsp;&nbsp; <b>客户：</b
            ><label>
              <input
                name="customer"
                placeholder="请输入要查询的客户名称"
                class="form-control"
              /> </label
            >&nbsp;&nbsp;
            <button type="button" class="btn btn-primary" onclick="like()">
              <span class="mdi mdi-table-search"></span>搜索
            </button>
          </form>
          <!-- 数据显示 -->
          <div class="table-responsive">
            <table id="table"></table>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      $(function () {
        // 初始化表格
        $("#table").bootstrapTable({
          classes: "table table-bordered table-hover table-striped text-nowrap", // 表格样式
          url: "${ctx}/customer-service/archive?state=5", // 请求后台的URL
          method: "GET", // 请求方式
          toolbar: "#toolbar",
          pagination: true, //是否显示分页条
          pageNumber: 1, // 首页页码，默认为1
          pageSize: 5, //一页显示的行数
          paginationLoop: false, //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
          pageList: [5, 10, 20], //选择每页显示多少行，数据过少时可能会没有效果
          clickToSelect: true, // 是否启用点击选中行
          undefinedText: "-", // 当字段为 undefined 显示
          sortOrder: "asc", // 排序方式
          showColumns: true, // 是否显示所有的列
          showRefresh: true, // 是否显示刷新按钮
          showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
          showExport: true, // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
          exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
          // 响应处理
          responseHandler: function (res) {
            if (res.code !== 200) {
              notify("mdi mdi-close", res.message, "danger");
              return [];
            }
            return res.data;
          },
          queryParams: function () {
            // 查询条件
            return $("form:eq(0)").serializeArray(); // 得到条件查询表单中所有的值
          },
          columns: [
            {
              field: "no", // 属性名
              align: "center", // 对齐方式
              title: "序号", // 标题
              formatter: function (value, row, index) {
                //返回序号，注意index是从0开始的，所以要加上1
                return index + 1;
              },
            },
            {
              field: "id",
              title: "编号",
              visible: false,
            },
            {
              field: "serviceType",
              align: "center",
              title: "服务类型",
            },
            {
              field: "overview",
              align: "center",
              title: "概述",
            },
            {
              field: "customer",
              align: "center",
              title: "客户",
            },
            {
              field: "serviceRequest",
              align: "center",
              title: "服务内容",
            },
            {
              field: "assigner",
              align: "center",
              title: "分配人",
            },
            {
              field: "assignDate",
              align: "center",
              title: "分配时间",
            },
            {
              field: "serviceProcess",
              align: "center",
              title: "处理内容",
            },
            {
              field: "serviceProcessPeople",
              align: "center",
              title: "处理人",
            },
            {
              field: "serviceProcessDate",
              align: "center",
              title: "处理时间",
            },
            {
              field: "serviceProcessResult",
              align: "center",
              title: "处理结果",
            },
            {
              field: "customerCacsi",
              align: "center",
              title: "满意度",
            },
            {
              field: "isValid",
              align: "center",
              title: "是否有效",
              formatter: function (value, row, index) {
                // 格式化
                if (row.isValid === 1) {
                  return "<span class='badge badge-success'>有效</sapn>";
                } else if (row.isValid === 0) {
                  return "<span class='badge badge-danger'>无效</span>";
                } else {
                  return "<span class='badge badge-info'>-</span>";
                }
              },
            },
            {
              field: "createAt",
              align: "center",
              title: "创建人",
            },
            {
              field: "createDate",
              align: "center",
              title: "创建时间",
            },
          ],
          onLoadSuccess: function () {
            // 数据加载成功时调用的方法
          },
          onLoadError: function () {
            // 数据加载失败时调用的方法
            setTimeout(function () {
              notify("mdi mdi-close", "数据加载失败!", "danger");
            }, 300);
          },
        });
      });
    </script>
  </body>
</html>
